<template>
  <div class="">
    <el-dialog title="提示" :visible.sync="showModal" >
      <el-form :model="boxData">
        <el-form-item label="名字" label-width="80">
          <el-input v-model="boxData.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>

    </el-dialog>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-menu"></i> 表格</el-breadcrumb-item>
        <el-breadcrumb-item>基础表格</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="handle-box">
      <el-button type="danger" icon="delete" @click="delBatch">批量删除</el-button>
      <el-select v-model="selectData.province" placeholder="筛选省份">
        <el-option v-for="province in provinceList" key="province" v-bind:value="province"
                   v-bind:label="province"></el-option>
      </el-select>
      <el-input v-model="selectData.keyword" placeholder="筛选关键词" class="handle-input mr10"></el-input>
      <el-button type="primary" icon="search" @click="search">搜索</el-button>
    </div>
    <el-table ref="table" :data="tableList" border @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55px">
      </el-table-column>
      <el-table-column label="日期" width="120" sortable>
        <template scope="scope">{{scope.row.date}}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        width="240">
      </el-table-column>
      <el-table-column
        label="操作">
        <template scope="scope">
          <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>


    <div class="pagination">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :total="1000">
      </el-pagination>

    </div>
  </div>
</template>
<script>

  export default {
    components: {
    },
    data: function () {
      return {
        hello: '',
        provinceList: [],
        selectData: {
          province: '',
          keyword: ''
        },
        cur_page: 1,
        tableList: [],
        multipleSelection: [],
        showModal: false,
        boxData: {
          name: ''
        }
      }

    },
    computed: {},
    created() {
      this.getData();
    },
    methods: {
      getData() {
        let self = this;
        this.$axios.get('basetable.json')
          .then(function (response) {
            var data = response.data;
            self.provinceList = data.provinceList;
            self.tableList = data.tableList;

          });
      },
      delBatch() {
        console.log("delete batch")
      },
      search() {
        console.log("search")
      },
      handleCurrentChange(val) {
        this.cur_page = val;
        console.log("curVal:" + val)
        this.getData();
      },
      handleSelectionChange(val) {
        console.log("table selected val:");
        console.log(val)
        this.multipleSelection = val;
      },
      handleDelete(index, row) {
        this.$confirm('删除，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'waring'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功,name:' + row['name']
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除，name:' + row['name']
          })
        })
        console.log("delete--")
        console.log(row)
      },
      handleEdit(index, row) {
        this.showModal = true;
      },
      save() {
        console.log('call back ,save....,show:' + this.showModal);
        console.log(this.boxData);
      },
      close() {
        console.log('call back ,close...,show:' + this.showModal);

      }
    }

  }
</script>
<style scoped>
  .handle-box {
    padding-top: 20px;
  }

  .handle-input {
    display: inline-block;
    width: 300px;
  }

</style>

